<template>
  <div class="">
    <h2>未读组件</h2>
    <ul class="list">
      <li
        v-for="(item, index) in $store.state.data"
        :key="item.id"
        v-show="item.status == 0"
      >
        {{ item.id }}.
        {{ item.title }}
        <el-button type="success" size="small" @click="change1(index)"
          >标为已读</el-button
        >
      </li>
    </ul>
    <el-button type="success" size="small" @click="all1">全部</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    change1(index) {
      this.$store.commit("change1", index);
    },
    all1() {
      this.$store.commit("all1");
    },
  },
  components: {},
};
</script>

<style lang="scss"></style>
